Android react-native初体验
经过查看各种资料, 终于对react-native有个初步的概念- 前端开发人员可以在此套框架下, 通过编写JSX代码, 实现app的开发(iOS, Android),无需写原生代码;- 使用react-native开发的应用,支持热更新,可直接在云端更新JS以更新应用,终端无需重新安装;官方Demo的Android安装:命令行界面下:$ npm install -g react-native-cli...
2024-01-10
React Native for Android 学习
前言Facebook 在2015.9.15发布了 React Native for Android，把 JavaScript 开发技术扩展到了移动Android平台。基于React的React Native 让前端开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 基于Web，iOS 和 Android 平台的原生应用。在React Native for Android出来之后，本人花了些时间从环境搭...
2024-01-10
Android Rreact Native 常见错误总结
Android Rreact Native 常见错误总结 1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写，否则会报错. 2.Module 0 is not a registered callable module. 将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android...
2024-01-10
react-navigation android 导航标题居中
先贴下代码供参考：安卓默认导航的titile 是在左侧的，为了和iOS保持一致，需要添加 alignSelf:'center',这个 属性 但是会遇到title有点偏右的情况添加headerRight 这个属性，就OK 了，仅此手记，供各位参考参考：https://github.com/react-community/react-navigation/issues/544...
2024-01-10
react-native 打包Android Release版本报错
RN项目，Debug版本可以正常运行，Release版本报错找了很多方面，一直没有解决，后来发现是多运行了一个命令导致的！！如下：请注意不要运行此命令后打包，否则一定回报资源错误！！！react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-...
2024-01-10
React Native App设置&Android版发布
React Native系列《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 一、设置APP信息1.设置包名、版本号目录：~/android/app/build.gradle2.设置应用名目录：~/android/app/sr...
2024-01-10
React 动画 Animation
文章源自: https://facebook.github.io/react/docs/animation.htmlReactCSSTransitionGroup 基于 ReactTransitionGroup ,当一个React组件enter或者leave时可以方便的用来执行CSS transitions和animations。导入ReactCSSTransitionGroupimport ReactCSSTransitionGroup from 'react-addons-css-transition-...
2024-01-10
windows下的react-native 开发环境搭建
本教程用安卓手机作为演示。首先安装jdk。本教程基于jdk1.8，安装时有一点要特别注意：jdk和jre必须装到不同目录下，否则初始化react-native项目时大概率报tools.jar not found exception。具体流程：先安装jdk到默认目录，第二次弹出选择路径对话框的时候先到jdk目录下删除jre文件夹，再安装jre到不同目录。...
2024-01-10
【react native】react navigation简述（3）
createStackNavigatorcreateStackNavigator类似于普通的navigator，屏幕上方导航栏createBottomTabNavigator屏幕下方标签栏createMaterialTopTabNavigator屏幕顶部的材料设计主题标签栏createDrawerNavigator抽屉效果，侧边划出createSwitchNavigator用途是一次只显示一个页面（跳转页面时候，第一个页面跳转到第...
2024-01-10
react native 之三 reactJSX基础
1. ReactJS 和 React Native 比较2.reactJSX书写借鉴于XHTML的一些规范 (1)开始和结束标签配对 <组件>ooxx</组件> (2)无内容的组件标签应写为自封闭标签 <组件/> (3)可自定义属性,字符串值应使用双引号,其他值用{}括起来 <Person age = {23} sex = "male" married = {tr...
2024-01-10
React Native的android API -ReactAndroid开源项目
ReactAndroid是React Native的android开源项目；React Native源码：https://github.com/facebook/react-native/tree/master/ReactAndroidReact Native的Android API不同版本的React Native Android API和React Native Android源码；项目目录的node_modules\react-native\android\com\facebook\react\rea...
2024-01-10
react-native-tab-navigation
原文地址安装npm install react-native-tab-navigator --save引入import TabNavigator from 'react-native-tab-navigator'如下面所示：import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, Image} from 'react-native';import TabNavigato...
2024-01-10
react middleware详解
自：https://www.jianshu.com/p/f4166120489b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation为什么dispatch需要middleware？middle.png上图表达的是 redux 中一个简单的同步数据流动的场景，点击 button 后，在回调中 dispatch 一个 action，reducer 收到 action 后，更新 state 并...
2024-01-10
react 实现 loading 动效圈，支持配置转一圈的 duration
本文地址： https:////www.cnblogs.com/veinyin/p/12442768.html需求：圆环从无到整，变成整圈后要有个渐隐效果实现效果如下 左右两个半圆相接处有一条灰色的边 这个暂时还没解决实现思路： 1. 左右两个半圆拼接成一个整圆，圆环通过 border 实现，最后 animation 实现动画效果 2. 先旋转右半边，0-45%旋转...
2024-01-10
Why React Is Favored by Front-End Specialists
In this section, we will discuss some of the features that make React a superior choice for front-end developers. Have a look:The Virtual DOM: As discussed above, React.js brought in the helpful Virtual DOM - a virtual browser infinite times friendlier tha...
2024-01-10
使用react-native-tab-navigator切换页面
切换页面是app最基本功能。这个功能需要用Navigation组件实现。RN发展太快了(v49)，之前自带的Navigation组件被弃用了，如果只针对ios，还可以用NavigatorIOS社区中也有几个不错的https://github.com/react-community/react-navigationhttps://github.com/wix/react-native-navigationhttps://github.com/happypancake/react-native-tab-navi...
2024-01-10
【安卓】React Navigation 5.x详解
一、 React Navigation简介在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不...
2024-01-10![[RN] React Native 使用 阿里 ant-design](/wp-content/uploads/thumbs/534683_thumbnail.jpg)
[RN] React Native 使用 阿里 ant-design
React Native 使用 阿里 ant-design 实例效果如图：一、安装npm install antd-mobile-rn --savenpm install babel-plugin-import --save-dev二、配置编辑根目录下 .babelrc 增加 红色区域显示代码{ "presets": [ "module:metro-react-native-babel-preset" ], "plugins": [ [ "import", { ...
2024-01-10
React Native 适配Android物理返回键，实现连续两次点击退出
一直使用iPhone作为测试机开发,提交给测试同事Android版本后发现很多适配问题,其中一个非常明显的是,弹出一个modal后,点击Android的返回键,modal不会消失,直接navigation goBack了在Android端需要处理物理按键事件 , 另外可以实现连续两次点击退出APP的功能 componentDidMount(): void { //挂载完,添加返回按键的监...
2024-01-10
Windows下配置React-native环境问题总结
从最近移动端市场的需求来看，Android原生开发已经危机重重，混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰，因此选择了有FaceBook技术背书的Reactive Native作为混合开发的切入技术。这篇博客是开篇，后面会有系列文章记录学习Reactive Native的成长，希望能帮助到后来的人，尤其...
2024-01-10详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键，会控制页面返回， 并且退出应用并非真正意义退出，仍在后台运行，所以在某些场景下需要监控android回退按键，那么在React Native中应该如何应用呢？我们具体来看看。BackAndroid此模块用于监听硬件的back键操作。看下具...
2024-01-10
react 百度地图中信息框infoWindow再插入echart视图
需求是在红框中再插入一个echart视图总感觉并不能直接响应react组件，好像百度地图弹出框是另外一个封装的dom。在infoWindow中的代码是：var content =...'<div class="trendContent">' +'<p class="bule">趋势图</p>' +'<p class="unit">单位/K</p>' +'</div>' +'<div id="main"></div>' +'</div>';随便插入一个官方视图componentDidMount() {v...
2024-01-10
分享我的 React Native 项目搭建探索之旅 --- Android版
我的 React Native 项目搭建探索首先，官网给了我们大概的指引https://reactnative.cn/docs/getting-started照着它做，方向总没错， but , 对于之前没接触过的人来说，照着做往往搭建不起来， 因为一些配置官网没有介绍到。。然后就会陷入error 无法自拔。。所以，那补充下官网没涉及的Android Studio 配置1，sdk ...
2024-01-10
（二）react-native开发系列之windows开发环境配置
之前写了react-native在mac上得环境搭建，但是如果只开发android的话，只要用windows系统就可以了，下面就来说下react-native的windows开发环境配置。1、下载配置jdk下载jdk1.8，下载之后安装jdk并配置环境变量，网上有很多教程，这里就不写了2、下载配置sdk之前有写过sdk的下载与安装，不熟悉的话可以看下：...
2024-01-10
react typescript FunctionComponent antd crud
这个界面跟之前VUE做的一样。并无任何不同之处，只是用react重复实现了一遍。import React, { useState, useEffect } from 'react';import { Row, Col, Table, Form, Cascader, Input, Button, Modal, message } from 'antd';import { FormComponentProps } from 'antd/lib/form';import http from '../../serv...
2024-01-10
